import { Button, Checkbox, Space, Table } from "antd";
import type { ColumnsType } from "antd/es/table";
import type { TableRowSelection } from "antd/es/table/interface";
import React, { useEffect, useState } from "react";

import request from "umi-request";
const response = await request.get("/api/content");

interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
  id: string;
}

const App: React.FC = () => {
  const [arr, setarr] = useState([]);
  useEffect(() => {
    setarr(response);
  }, []);
  console.log(arr); //打印总数据

  const del = (index:any) => {//定义删除事件
    let deld = [...arr]
    deld.splice(index,1)
    setarr(deld)
   
  }
  const columns: ColumnsType<DataType> = [
    {
      title: "ID",
      dataIndex: "id",

      render: (text) => <span>{text}</span>,
    },
    {
      title: "项目名称",
      dataIndex: "name",
    },
    {
      title: "所属分类",
      dataIndex: "fl",
    },
    {
      title: "最后采集时间",

      dataIndex: "date",
    },
    {
      title: "操作",

      render: (_, record: any) => (
        <Space size="middle">
          <Button
            style={{
              background: "#48B0FC",
              color: "#fff",
              display: "block",
              textAlign: "center",
            }}
          >
            复制
          </Button>
          <Button
            style={{
              background: "#48B0FC",
              color: "#fff",
              display: "block",
              textAlign: "center",
            }}
          >
            测试
          </Button>
          <Button
            style={{
              background: "#009688",
              color: "#fff",
              display: "block",
              textAlign: "center",
            }}
          >
            采集{" "}
          </Button>
          <Button
            style={{
              background: "#009688",
              color: "#fff",
              display: "block",
              textAlign: "center",
            }}
          >
            发布
          </Button>
          <Button
            style={{
              background: "#009688",
              color: "#fff",
              display: "block",
              textAlign: "center",
            }}
          >
            编辑
          </Button>
          <Button
            style={{
              background: "#FF5722",
              color: "#fff",
              display: "block",
              textAlign: "center",
            }}
        onClick={()=>del(record.index)}>
            删除
          </Button>
        </Space>
      ),
    },
  ];

  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log("selectedRowKeys changed: ", newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection: TableRowSelection<DataType> = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  return (
    <>
      <span
        style={{
          background: "#009688",
          color: "#fff",
          width: "100px",
          height: "28px",
          display: "block",
          textAlign: "center",
        }}
      >
        添加项目{" "}
      </span>
      <Table
        bordered={true}
        columns={columns}
        dataSource={arr}
        rowSelection={rowSelection}
        style={{ padding: "15px" }}
      />
      ;
      <div className="bottom">
        <Checkbox>全选/取消</Checkbox>

        <button
          style={{
            backgroundColor: "red",
            border: "none",
            color: "#fff",
            width: "60px",
            height: "30px",
          }}
        >
          删除
        </button>
      </div>
    </>
  );
};
export default App;
